<template>
  <header id="header">
    <div class="container">
      <div class="lan2">
        <div class="clink" v-if="isEng">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a  @click="changeType('zh')">{{ $t("header_zh") }}</a>
        </div>
        <div class="clink" v-else>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a  @click="changeType('en')">{{ $t("header_en") }}</a>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-3 col-md-2">
          <div id="logo">
            <a href="/"
              ><img
                :src="require('@/assets/image/top-logo.png')"
                :alt="$t('webName')"
            /></a>
          </div>
        </div>
        <nav class="col-xs-9 col-md-10">
          <a
            class="cmn-toggle-switch cmn-toggle-switch__htx open_close"
            href="javascript:void(0);"
            ><span>Menu mobile</span></a
          >
          <div class="main-menu">
            <div id="header_menu">
              <img
                class="logo-img"
                :src="require('@/assets/image/top-logo.png')"
                height="44"
                :alt="$t('webName')"
                data-retina="true"
              />
            </div>
            <a href="#" class="open_close" id="close_in"
              ><i class="icon_close"></i
            ></a>
            <ul>
              <li
              @click="closeLayer"
                :class="{ submenu: item.childs.length > 0 }"
                v-for="(item, index) in routerArr"
                :key="index"
                :id="'type_' + (item.name || 'Home')"
              >
                <router-link :to="{ path: item.path }">{{
                  item.title
                }}</router-link>
                <router-link
                  v-if="item.childs.length > 0"
                  class="show-submenu"
                  style="cursor: pointer"
                  target="_self"
                  :to="{ path: item.path }"
                >
                  <span :data-title="item.title">{{ item.title }}</span>
                  <i class="icon-down-open-mini" style="cursor: pointer"></i>
                </router-link>
                <ul v-if="item.childs.length > 0">
                  <li
                  @click="closeLayer"
                    id="type_3"
                    v-for="(subItem, index) in item.childs"
                    :key="index"
                  >
                  <!-- 这个地方如果是超链接的话，需要跳转到超链接 -->
                  <a v-if="subItem.link"
                     :href="subItem.link"
                     target="_blank"
                      >{{ subItem.title }}</a
                    >
                    <router-link v-else
                      :to="{ path: item.path, query: { tab: subItem.tab } }"
                      >{{ subItem.title }}</router-link
                    >
                  </li>
                </ul>
              </li>
              <li
                class="jsMoveEl"
                style="
                  position: absolute;
                  left: 0px;
                  filter: alpha(opacity=0);
                  -moz-opacity: 0;
                  opacity: 0;
                  bottom: 0px;
                  width: 84px;
                  height: 2px;
                  z-index: -1;
                  opacity: 1;
                "
              >
                <span
                  style="
                    position: absolute;
                    left: 0px;
                    right: 0px;
                    top: 0px;
                    margin: auto;
                    width: 100%;
                    height: 2px;
                    z-index: -1;
                    opacity: 1;
                  "
                ></span>
              </li>

              <!-- <div class="search_wrap">
                <div class="searchOnOff">
                  <span class="icon iconfont icon-search"></span>
                </div>

                <div class="searchBox">
                  <form method="get" name="formsearch" action="/search.php">
                    <div class="searchFormGroup">
                      <input
                        type="text"
                        name="keyword"
                        aria-label="搜索"
                        placeholder="搜索"
                        autocorrect="off"
                        autocapitalize="off"
                        autocomplete="off"
                        spellcheck="false"
                      />
                      <button type="submit" class="searchSub">
                        <span class="icon iconfont icon-search"></span>
                      </button>
                    </div>
                  </form>
                </div>
              </div> -->
              <div class="lan">
                <div class="clink">
                  <a @click="changeType('zh')">{{ $t("header_zh") }}</a
                  >/
                  <a @click="changeType('en')">{{ $t("header_en") }}</a>
                </div>
              </div>
            </ul>
          </div>
          <!-- End main-menu -->
        </nav>
      </div>
    </div>
    <!-- container -->
  </header>
</template>

<script>
// @ is an alias to /src
import { getNav } from '@/service/getData.js'
import { isEn } from '@/common/util.js'
export default {
  name: 'Header',
  data() {
    return {
      isMobile:false,
      isEng:false,
      routerArr: [
        { title: this.$t('nav_home'), path: '/', name: 'Home', childs: [] },
        {
          title: this.$t('nav_about'), id: 1, path: '/about', name: 'About', childs: [
            { title: this.$t('about_the_institute'), id: 2, tab: 1, name: 'AboutIntroduce' },
            { title: this.$t('message_from_the_directors'), id: 3, tab: 2, name: 'Welocme' }
          ]
        },
        {
          title: this.$t('nav_people'), path: '/people', id: 4, name: 'People', childs: [
            { title: this.$t('directors'), id: 6, tab: 1 },
            { title: this.$t('advisory_board'), id: 7, tab: 2 },
            // { title: this.$t('researchers'), id: 7, tab: 3 }
          ]
        },
        {
          title: this.$t('nav_research'), path: '/research', id: 8, name: 'Research', childs: [
            { title: this.$t('projects'), id: 9, tab: 1 },
            { title: this.$t('publications'), id: 10, tab: 2 },
          ]
        },
        { title: this.$t('nav_new'), path: '/new', name: 'New', id: 11, childs: [] },
        { title: this.$t('nav_laboratory'), path: '/laboratory', id: 12, name: 'Laboratory', childs: [] },
        { title: this.$t('nav_reserve'), path: '/reserve', id: 100, name: 'Reserve', childs: [] },
      ]
    }
  },
  watch: {
    $route(to) {
      this.setLineOffset(to.name)
    },
  },
 async mounted() {
    this.isEng = isEn()
    this.$nextTick(() => {
      this.setMobileStyle()
      this.setLineOffset('Home')
      this.lineMove()
    })
    let res = await getNav()
    if(res.length){
      let laboratory =  res.find( item =>{
          return item.id === 12
      })
      let curLaboratory = this.routerArr.find( item =>{
         return item.id === 12
      })
      curLaboratory.childs = laboratory.items
      curLaboratory.childs.map(item =>{
        if(!item.link){
           item.link = 'http://www.innojoy.com/'
        }
        item.title = isEn() ? item.name_en : item.name
      })
    }
  },
  methods: {
    async replaceRouter() {
    },
    changeType(type) {
      localStorage.setItem('locale', type)
      this.$i18n.locale = type
      location.reload()
    },
    setLineOffset(toName) {
      let name = toName || 'Home'
      switch (name) {
        case 'PeopleInfo':
          name = 'People'
          break;
        case 'NewDetail':
          name = 'New'
          break;
        case 'researchDetail':
          name = 'Research'
          break;
        default:
          break;
      }

      $(`#type_${name}`).each(function () {
        $(this).nextAll(".jsMoveEl").css({
          'width': parseFloat($(this).width()) + "px",
          'left': parseFloat($(this)[0].offsetLeft) + "px"
        });
      })
      $(".main-menu>ul>li").hover(function () {
        $(".jsMoveEl").css("transition", "all .3s ease-in-out");
        $(".jsMoveEl").css("width", parseFloat($(this).width()) + "px");
        $(".jsMoveEl").css("left", parseFloat($(this)[0].offsetLeft) + "px");
      }, function () {
        var selwidth = $(`#type_${name}`).width();
        if (selwidth == undefined) return
        var seloffsetleft = $(`#type_${name}`)[0].offsetLeft;
        $(".jsMoveEl").css("width", selwidth + "px");
        $(".jsMoveEl").css("left", seloffsetleft);

      });
    },
    lineMove() {
      $(".searchOnOff span").bind("click", function () {
        var $content = $(".searchBox");
        if ($content.is(":visible")) {
          $content.hide();
        } else {
          $content.show();
        }
      })
      // let seloffsetleft;
      var headerHeight = $("#header").outerHeight();
      if (($("#header").length > 0)) {
        $(window).scroll(function () {
          if (($(this).scrollTop() > headerHeight) && ($(window).width() > 1024)) {
            //   $(".head_t").slideUp();
            $("#header").addClass("scrhead");
            $("#header").addClass('animated');
          } else {
            //  $(".head_t").slideDown();
            $("#header").removeClass("scrhead")
          }
        });
      }
    },
    closeLayer(){
      if(!this.isMobile ) return
       $(".main-menu").toggleClass("show"),
       $(".layer").toggleClass("layer-is-visible")
    },
    setMobileStyle() {
      let that = this
        $("a.open_close").on("click",
        function () {
          $(".main-menu").toggleClass("show"),
            $(".layer").toggleClass("layer-is-visible")
        }),
        $(".icon-down-open-mini").on("click",
          function () {
            $(this).parent().next().toggleClass("show_normal")
          }),
        $("a.show-submenu-mega").on("click",
          function () {
            $(this).next().toggleClass("show_mega")
          }),
        $(window).on("resize load",
          function(){
            if( $(this).width() < 480){
               that.isMobile = true
            }else{
              that.isMobile = false
            }
            $(this).width() < 480 && $("a.open_close").on("click",
              function () {
                $(".cmn-toggle-switch").removeClass("active")
              })
          });
    }
  },

}
</script>
<style>
/* @import url("./style.css"); */
</style>